<template>
	<div id="cpn-table-fieldr">
		<table-toolbar-filed v-if="isShowToolbar" :selectedCount="selection.length" :total="total" />
		<el-table @current-change="currentChange" :highlight-current-row="highlightCurrentRow" v-loading="loading"
			ref="tableRef" v-bind="$attrs" :default-sort="defaultSort" @sort-change="sortChange" :row-key="rowKey" :tree-props="treeProps"
			@selection-change="handleSelectionChange" @select="handleSelect" @row-click="handleRowClick"
			@select-all="handleSelectAll" :height="height" :stripe="stripe" :data="tableData" class="borderR">
			<slot></slot>
		</el-table>
		<!-- 分页 begin-->
		<pagination-field :layout="pageLayout" v-show="showPagination" @limitClick="limitClick" @pageClick="pageClick"
			:total="total" :currentPage="defaultPage" :pageSize="defaultPageSize" :pageSizes="pageSizes" />
		<!-- 分页 end-->
	</div>
</template>

<script>
import request from '@/api/request'
import Pagination from './pagination.vue'
import TableToolbar from './TableToolbar.vue'

export default {
	name: 'table-field',
	components: {
		[Pagination.name]: Pagination,
		[TableToolbar.name]: TableToolbar
	},
	//
	data() {
		return {
			loading: false,
			isShowPage: false,
			// table-field数据
			tableData: [],
			// 总记录数
			total: 0,
			// 默认pageSize
			defaultPageSize: 10,
			// 分页
			defaultPage: 1,
			// 后台响应数据
			data: [],
			// 后台请求接口配置
			defaultConfig: {
				// 默认根集合
				rootProperty: 'data',
				data: {}
			},
			// 选中的数据
			selection: []
		}
	},
	created() {
		// 一页多少条
		this.defaultPageSize = this.pageSize || 10
	},
	//
	methods: {
		/**
		 * 根据下标修改data里面的值
		 */
		set(index, record) {
			this.$set(this.tableData, index, record)
		},
		/**
		 *
		 */
		currentChange(currentRow, oldCurrentRow) {
			this.$emit('current-change', currentRow, oldCurrentRow)
		},
		// 清空表格选中行
		clearSelection() {
			//
			this.$refs.tableRef.clearSelection()
		},
		/**
		 * 当表格的排序条件发生变化的时候会触发该事件
		 */
		sortChange(e) {
			this.$emit('sort-change', e)
		},
		// 设置选中项目
		toggleRowSelection(item, status) {
			this.$refs.tableRef.toggleRowSelection(item, status)
		},
		/**
		 * 复选框事件
		 */
		handleSelectionChange(item) {
			this.$emit('selection-change', item)
		},
		/**
		 * 当用户手动勾选数据行的 Checkbox 时触发的事件
		 */
		handleSelect(selection, row) {
			this.selection = selection
			this.$emit('select', selection, row)
		},
		/**
		 * 当用户手动勾选全选 Checkbox 时触发的事件
		 */
		handleSelectAll(selection) {
			this.selection = selection
			this.$emit('select-all', selection)
		},
		/**
		 * 表格行点击事件
		 */
		handleRowClick(row) {
			this.$emit('row-click', row)
		},
		// 重新查询
		reloadData() {
			this.defaultPage = 1
		},
		// 设置最新请求
		setConfig() {
			// 合并请求参数
			this.defaultConfig = Object.assign(this.defaultConfig, this.config)
			// 如果配置了分页
			if (this.showPagination === true) {
				// 设置分页信息
				this.defaultConfig.data[this.pageField] =
					this.pageType === 'string' ? this.defaultPage + '' : this.defaultPage
				//
				this.defaultConfig.data[this.pageSizeField] =
					this.pageType === 'string' ? this.defaultPageSize + '' : this.defaultPageSize
			}
		},
		// 页数点击
		pageClick(num) {
			//
			this.$emit('pageChange', num)
			// 发送请求
			this.defaultPage = num
			//
			this.loadData()
		},
		// 条数限制
		limitClick(num) {
			//
			this.$emit('limitChange', num)
			//
			this.defaultPage = 1
			this.defaultPageSize = num
			//
			this.loadData()
		},
		// 返回当前页数据
		getTableData() {
			//
			return this.tableData
		},
		// 返回接口响应数据
		getData() {
			//
			return this.data
		},
		// 返回总记录数
		getTotal() {
			//
			return this.total
		},
		// 发送请求
		loadData(isReload, isSort) {
			// 如果是静态挡板数据不发请求
			if (!this.config && this.staticData) {
				if (isSort === true) {
					this.tableData = this.staticData
				} else {
					this.success(this.staticData)
				}
				return
			}
			// 重置查询
			if (isReload === true) {
				this.reloadData()
			}
			// 处理data
			this.setConfig()
			// console.log('最新请求参数====', this.defaultConfig)
			// 发送请求
			this.doRequest(this.defaultConfig)
		},
		// 发送请求
		doRequest(config) {
			// 开启等待层
			if (this.loadMask) {
				this.loading = true
			}
			//
			let cfg = Object.assign(config, {
				method: 'post'
			})
			// 发送请求
			request(cfg)
				.then((res) => {
					// console.log('响应的数据 === ', res)
					// 响应数据
					this.data = res
					//
					this.success(res)
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 请求成功方法
		success(data) {
			this.loading = false
			console.log('data===', data)
			//
			this.total = Number(data[this.totalProperty]) || data?.data?.total || 0
			// this.total = data.data.total
			console.log('this.total === ', this.total)
			// 取根集合
			let rootProperty = this.defaultConfig.rootProperty
			let tData = []
			// 处理
			if (rootProperty) {
				rootProperty.split('.').forEach((property) => {
					if (data) {
						data = data[property]
					}
				})
				tData = data
			}
			this.tableData = tData
			// console.log('tableData', this.tableData)
			// 返回事件
			this.$emit('tabaleTotal', this.total)
			this.$emit('tableData', this.tableData)
			this.$emit('resData', this.data)
		}
	},
	props: {
		// 是否显示toolbar
		isShowToolbar: {
			type: Boolean,
			default: false
		},
		// 是否要高亮当前行
		highlightCurrentRow: {
			type: Boolean,
			default: false
		},
		// 默认显示等待层
		loadMask: {
			type: Boolean,
			default: false
		},
		// 手动指定数据
		staticData: [Object, Array],
		// 请求配置
		config: Object,
		// 隔行换色
		stripe: {
			type: Boolean,
			default: false
		},
		// 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
		defaultSort: Object,
		// 表格高度
		height: [String, Number],
		// 根集合
		rootProperty: {
			type: String,
			default: 'data'
		},
		// 总记录数
		totalProperty: {
			type: String,
			default: 'total'
		},
		// 分页类型(string、number)，默认数字
		pageType: {
			type: String,
			default: 'number'
		},
		// 一页多少条
		pageSize: {
			type: Number,
			default: 10
		},
		// 第几页字段
		pageField: {
			type: String,
			default: 'page'
		},
		// 每页条数字段
		pageSizeField: {
			type: String,
			default: 'pageSize'
		},
		// 是否显示分页
		showPagination: {
			type: Boolean,
			default: true
		},
		// 分页布局
		pageLayout: String,
		/**
		 * 下拉每页显示个数选择器的选项设置
		 */
		pageSizes: {
			type: [Object, Array],
			default: () => {
				return [10, 20, 30, 40, 50, 100]
			}
		},
		treeProps: Object,
		rowKey: String
	}
}
</script>
<style lang="scss">
#cpn-table-fieldr {

	thead th .el-checkbox:last-of-type {
		// padding-left: 4px;
	}
}
</style>
